<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="icon" href="img/milogo.ico" type="image/x-icon">
		<link rel="stylesheet" type="text/css" href="font/iconfont.css" />
		<link rel="stylesheet" type="text/css" href="CSS/login.css" />
	</head>
	<body>
		<!-- 小米账号导航栏 -->
		<div class="header-bg">
			<div class="header-left"><img src="img/login/loginleft.jpg"></div>
			<div class="header-right Container ">
				<div class="clearfix one">
					<a href="https://account.xiaomi.com/fe/service/login"><img src="img/login/logomi2.png"></a>
					<span class="header-item-tit">小米账号</span>
					<ul class="header-list-tit fr">
						<li>用户协议</li>
						<li>隐私政策</li>
						<li>帮助中心</li>
						<li class="language-title">
							<div>‎中文(简体)‎<span class="iconfont icon-sanjiaoxing"></span></div>
							<div class="language-list">
								<ul>
									<li>‎‎中文(繁體)‎</li>
									<li>English</li>
								</ul>
							</div>
						</li>
					</ul>
				</div>
				<div class="login-box">
					<div class="login Container">
						<div class="Scan">
							<a class="iconfont icon-qrcode-1-copy"></a>
						</div>
						<div><!-- 扫码登录左侧一行字 -->
							<span class="Scan-text">扫码登录</span>
							<span class="Scan-text-triangle"></span>
						</div>
						<div>
							<ul class="login-list-tit">
								<li class="log login-active">登录</li>
								<li class="resg">注册</li>
							</ul>
						</div>
						<!-- 登录模块 -->
						<div class="login-sum">
							<form id="loginForm" action="/login" method="post">
							<div class="mobile">
								<label for="login-number" class="focus">邮箱/手机号码/小米ID</label>
								<input name="username" id="login-number" class="login-user" type="text"/>
							</div>
							<div class="password">
								<label for="login-password" class="focus">密码</label>
								<input name="password" id="login-password" class="login-password" type="password" /><span id="eye1" class=""></span>
								
							</div>
							<div><a id="login-button" href="javascript:;" class="login-button">登录</a></div>
							<div class="login-bottom">
								<span>忘记密码？</span>
								<span>手机号登录</span>
							</div>
							<div class="login-other-text">其他方式登录</div>
							<div>
								<ul class="login-other">
									<li><a href="" class="iconfont icon-qq"></a></li>
									<li><a href="" class="iconfont icon-weibo"></a></li>
									<li><a href="" class="iconfont icon-zhifubao"></a></li>
									<li><a href="" class="iconfont icon-weixin"></a></li>
								</ul>
							</div>
						</div></form>
						<!-- 注册模块 -->
						<div class="register-sum">
							<div class="register-nation">
								<select>
									<option value="中国">中国</option>
									<option value="美国">美国</option>
									<option value="日本">日本</option>
									<option value="韩国">韩国</option>
								</select>
							</div>
							<div class="register-message-box">
								<span class="register-message-number">
									<select>
										<option value="+86">+86</option>
										<option value="+1">+1</option>
										<option value="+163">+163</option>
									</select>
								</span>
								<input id="register-number" class="register-number" type="number" placeholder="手机号" value="12345678909"/>
							</div>
							<div class="message">
								<label for="register-message" class="focus">短信验证码</label>
								<input id="register-message" class="register-message" type="number"/>
							</div>
							<div><a id="register-button" class="register-button">注册</a></div>
							<div class="login-bottom"><a href="#"> 收不到验证码？</a></div>
							<div><input id="register-chec" class="chec" type="checkbox"><label for="register-chec">已阅读并同意小米账号用户协议和隐私政策</label></div>
							<div class="login-other-text">其他方式登录</div>
							<div>
								<ul class="login-other">
									<li><a href="" class="iconfont icon-qq"></a></li>
									<li><a href="" class="iconfont icon-weibo"></a></li>
									<li><a href="" class="iconfont icon-zhifubao"></a></li>
									<li><a href="" class="iconfont icon-weixin"></a></li>
								</ul>
							</div>
						</div>
						<!-- 扫码登录模块 -->
						<div class="scan-sum">
							<div class="scan-tit">扫码登录 安全快捷</div>
							<div class="scan-img"><img src="img/login/scan.jpg" ></div>
							<div class="scan-text">请使用小米手机/米家等小米旗下APP扫码登录</div>
							<div class="scan-other">支持扫码登录的App</div>
							<div class="scan-other-list">
								<ul>
									<li>
										<span><img src="img/login/mijia.png" style="width: 50px; height: 50px;"></span>
										<p>米家</p>
									</li>
									<li>
										<span><img src="img/login/logomi2.png"  style="width: 50px; height: 50px;"></span>
										<p>小米商城</p>
									</li>
									<li>
										<span><img src="img/login/xiaoai.png"  style="width: 50px; height: 50px;"></span>
										<p>小爱音箱</p>
									</li>
								</ul>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="desc">小米公司版权所有-京ICP备10046444-京公网安备11010802020134号-京ICP证110507号</div>
		</div>
		<script src="JS/login.js">
			
		</script>
		<script type="text/javascript">
			//密码框
			
			var EY = document.querySelector('#eye1');
			EY.className = 'iconfont icon-eye';
			var sta = true;
			EY.onclick = function(){
				if(sta){
					EY.className='iconfont icon-eye1';
					logipas.type='text'

				}else{
					EY.className='iconfont icon-eye';
					logipas.type='password'
				}
				sta = !sta;
			}
		
			var Logi = document.querySelector('.log');
			var Resgi =document.querySelector('.resg');
			var LOdisp = document.querySelector('.login-sum');
			var REdisp = document.querySelector('.register-sum');
			
			
			Logi.onclick=function(){
				LOdisp.style.display = 'block';
				REdisp.style.display = 'none';
				Logi.className = 'log login-active'
				Resgi.className = 'resg'
			}
			
			Resgi.onclick=function(){
				LOdisp.style.display = 'none';
				REdisp.style.display = 'block';
				Logi.className = 'log'
				Resgi.className = 'resg login-active'
			}
			
			//扫码登陆
			var sca = document.querySelector('.Scan');
			var im  = document.querySelector('.Scan a');
			var statu = true;
			
			sca.onclick=function(){
				var one = document.querySelector('.resg').classList.contains('login-active');
				if(statu == true){
					im.className = 'iconfont icon-diannao';
					document.querySelector('.scan-sum').style.display = 'block';
					document.querySelector('.login-list-tit').style.display= 'none';
					document.querySelector('.Scan-text').innerHTML = '密码登录';
					document.querySelector('.register-sum').style.display= 'none';
					document.querySelector('.login-sum').style.display= 'none';
				}else{
					im.className = 'iconfont icon-qrcode-1-copy';
					document.querySelector('.scan-sum').style.display = 'none';
					document.querySelector('.login-list-tit').style.display= 'block';
					document.querySelector('.Scan-text').innerHTML = '扫码登录';
					console.log(one)
					
					if(one == true){
						console.log('1');
						document.querySelector('.register-sum').style.display= 'block';
						document.querySelector('.login-sum').style.display= 'none';
					}else{
						console.log('2')
						document.querySelector('.register-sum').style.display= 'none';
						document.querySelector('.login-sum').style.display= 'block';
					}
				}
				statu = !statu;
			}
			
			//扫码登陆获取焦点时，左侧显示一行字
			document.querySelector('.Scan').onmouseenter=function(){
				document.querySelector('.Scan-text').style.display = 'block';
				document.querySelector('.Scan-text-triangle').style.display = 'block';
				
			}
			document.querySelector('.Scan').onmouseleave=function(){
				document.querySelector('.Scan-text').style.display = 'none';
				document.querySelector('.Scan-text-triangle').style.display = 'none';
				
			}
			
			
			//登录按钮   判断条件，符合则进入首页
			var logibtn = document.querySelector('.login-button');
			var logiuse = document.querySelector('.login-user');
			var logipas = document.querySelector('.login-password');
			logibtn.onclick=function(){
				if(logiuse.value==0 || logipas.value==0){
					alert('请输入账号或密码');
					return;
				}else{
					document.querySelector(' #loginForm').submit();
				}
			}
			
			//注册按钮  
			var resibtn = document.querySelector('.register-button');
			var resinum = document.querySelector('.register-number');
			var resimes = document.querySelector('.register-message');
			
			var che =document.querySelector('.chec');
			resibtn.onclick=function(){
				var phonenu = resinum.value;
				var messnu = resimes.value;
				if(phonenu==0 || messnu==0){
					alert('请输入手机号或验证码');
					return;
				}if(phonenu.length != 11){
					alert('请输入正确的手机号');
					return;
				}if(messnu.length != 6){
					alert('请输入正确的六位验证码');
					return;
				}if(che.checked==false){
					alert('请先勾选用户协议');
					return;
				}
				
				alert('注册成功');
				document.querySelector('.mobile label').classList.add('focus');
				document.querySelector('#login-number').value=document.querySelector('#register-number').value;
				document.querySelector('.register-sum').style.display = 'none';
				document.querySelector('.login-sum').style.display = 'block';
				document.querySelector('.resg').classList.remove('login-active');
				document.querySelector('.log').classList.add('login-active');
			}
			
		</script>
	</body>
</html>
